<template>
  <div ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chart = null

const initChart = () => {
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: '一周温度变化趋势',
      textStyle: {
        color: '#eaeaea',
        fontSize: 16,
        fontWeight: 'bold'
      },
      left: 20,
      top: 10
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.1)',
      borderColor: 'rgba(255, 255, 255, 0.2)',
      textStyle: {
        color: '#eaeaea'
      },
      borderRadius: 8,
      padding: [8, 12],
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      }
    },
    legend: {
      textStyle: {
        color: '#eaeaea',
        fontSize: 12
      },
      left: 20,
      top: 40,
      orient: 'horizontal',
      itemGap: 20,
      icon: 'roundRect',
      textGap: 8,
      itemWidth: 15,
      itemHeight: 6
    },
    toolbox: {
      right: 20,
      top: 10,
      feature: {
        dataZoom: {
          yAxisIndex: 'none',
          iconStyle: {
            borderColor: '#eaeaea'
          }
        },
        dataView: {
          readOnly: false,
          iconStyle: {
            borderColor: '#eaeaea'
          }
        },
        magicType: {
          type: ['line', 'bar'],
          iconStyle: {
            borderColor: '#eaeaea'
          }
        },
        restore: {
          iconStyle: {
            borderColor: '#eaeaea'
          }
        },
        saveAsImage: {
          iconStyle: {
            borderColor: '#eaeaea'
          }
        }
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '8%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: {
        color: '#eaeaea',
        fontSize: 12,
        margin: 12
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(238, 238, 238, 0.2)'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} °C',
        color: '#eaeaea',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(238, 238, 238, 0.1)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '最高温',
        type: 'line',
        data: [10, 11, 13, 11, 12, 12, 9],
        smooth: true,
        symbolSize: 8,
        lineStyle: {
          width: 3
        },
        itemStyle: {
          color: '#ff6b6b'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(255, 107, 107, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(255, 107, 107, 0)'
            }]
          }
        }
      },
      {
        name: '最低温',
        type: 'line',
        data: [1, -2, 2, 5, 3, 2, 0],
        smooth: true,
        symbolSize: 8,
        lineStyle: {
          width: 3
        },
        itemStyle: {
          color: '#4ecdc4'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(78, 205, 196, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(78, 205, 196, 0)'
            }]
          }
        }
      }
    ]
  }

  if (chart) {
    chart.setOption(option)
  } else {
    chart = echarts.init(chartRef.value)
    chart.setOption(option)
  }
}

const debounce = (fn, delay) => {
  let timer = null
  return function() {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, arguments), delay)
  }
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', debounce(() => {
    chart?.resize()
  }, 300))
})
</script>

<style scoped>
div {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

div:hover {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
</style> 